
<!--
> Muaz Khan     - www.MuazKhan.com
> MIT License   - www.WebRTC-Experiment.com/licence
> Documentation - github.com/muaz-khan/getStats
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <title>getStats.js Demo ® Muaz Khan</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
    <meta name="author" content="Muaz Khan">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
    <link rel="stylesheet" href="https://cdn.webrtc-experiment.com/style.css">

    <style>
            audio, video {
                -moz-transition: all 1s ease;
                -ms-transition: all 1s ease;
                
                -o-transition: all 1s ease;
                -webkit-transition: all 1s ease;
                transition: all 1s ease;
                vertical-align: top;
            }

            input {
                border: 1px solid #d9d9d9;
                border-radius: 1px;
                font-size: 2em;
                margin: .2em;
                width: 30%;
            }

            .setup {
                border-bottom-left-radius: 0;
                border-top-left-radius: 0;
                font-size: 102%;
                height: 47px;
                margin-left: -9px;
                margin-top: 8px;
                position: absolute;
            }

            p { padding: 1em; }

            li {
                border-bottom: 1px solid rgb(189, 189, 189);
                border-left: 1px solid rgb(189, 189, 189);
                padding: .5em;
            }
            
            .videos-container {
                display: inline-block;
                border: 2px solid black;
                padding: .1em;
                border-radius: 0.2em;
                margin: 2em .2em;
                background: white;
                vertical-align: top;
            }
            .videos-container h2 {
                border: 0;
                border-top: 1px solid black;
                margin: 0;
                text-align: center;
                display:block;
            }
            video {
                width:20em;
                height: 15em;
                background: black;
            }
    </style>

    <script src="/getStats.js"></script>

    <!-- for Edige/FF/Chrome/Opera/etc. getUserMedia support -->
    <script src="https://cdn.webrtc-experiment.com/gumadapter.js"></script>
</head>

<body>
    <article>
        <header style="text-align: center;">
            <h1>
                getStats.js Demo ®
                <a href="https://github.com/muaz-khan" target="_blank">Muaz Khan</a>
            </h1>
            <p>
                <a href="https://www.webrtc-experiment.com/">HOME</a>
                <span> &copy; </span>
                <a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a> .
                <a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a> .
                <a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a> .
                <a href="https://github.com/muaz-khan/getStats/issues?state=open" target="_blank">Latest issues</a> .
                <a href="https://github.com/muaz-khan/getStats/commits/master" target="_blank">What's New?</a>
            </p>
        </header>

        <div class="github-stargazers"></div>
        
        <div style="text-align:center;">
                <div class="videos-container">
                    <video id="peer2-to-peer1" autoplay controls></video>
                     <h2>Offerer-to-Answerer</h2>

                </div>
                <div class="videos-container">
                    <video id="peer1-to-peer2" autoplay controls></video>
                     <h2>Answerer-to-Offerer</h2>

                </div>
            </div>
            <script>
                 var mediaConstraints = {
                    optional: [],
                    mandatory: {
                        OfferToReceiveAudio: true,
                        OfferToReceiveVideo: true
                    }
                };
            </script>
            <script>
                var offerer, answerer;
                var offererToAnswerer = document.getElementById('peer1-to-peer2');
                var answererToOfferer = document.getElementById('peer2-to-peer1');

                window.RTCPeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
                window.RTCSessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription;
                window.RTCIceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate;

                var iceServers = [];

                // Firefox <= 37 doesn't understands "urls"

                iceServers.push({
                    urls: 'stun:stun.l.google.com:19302'
                });

                iceServers.push({
                    urls: 'stun:stun.anyfirewall.com:3478'
                });

                iceServers.push({
                    urls: 'turn:turn.bistri.com:80',
                    credential: 'homeo',
                    username: 'homeo'
                });

                iceServers.push({
                    urls: 'turn:turn.anyfirewall.com:443?transport=tcp',
                    credential: 'webrtc',
                    username: 'webrtc'
                });

                iceServers = {
                    iceServers: iceServers
                };
            </script>
            <script>
                /* offerer */

                function offererPeer(video_stream) {
                    offerer = new RTCPeerConnection(window.iceServers);
                    offerer.id = 1;
                    offerer.addStream(video_stream);

                    offerer.onaddstream = function (event) {
                        offererToAnswerer.srcObject = event.stream;
                        offererToAnswerer.play();

                        invokeGetStats(offerer);
                    };

                    offerer.onicecandidate = function (event) {
                        if (!event || !event.candidate) return;
                        answerer.addIceCandidate(event.candidate);
                    };

                    offerer.createOffer(function (offer) {
                        offerer.setLocalDescription(offer);
                        answererPeer(offer, video_stream);
                    }, function() {}, mediaConstraints);
                }
            </script>
            <script>
                /* answerer */

                function answererPeer(offer, video_stream) {
                    answerer = new RTCPeerConnection(window.iceServers);
                    answerer.id = 2;
                    answerer.addStream(video_stream);

                    answerer.onaddstream = function (event) {
                        answererToOfferer.srcObject = event.stream;
                        answererToOfferer.play();

                        invokeGetStats(answerer);
                    };

                    answerer.onicecandidate = function (event) {
                        if (!event || !event.candidate) return;
                        offerer.addIceCandidate(event.candidate);
                    };

                    answerer.setRemoteDescription(offer);
                    answerer.createAnswer(function (answer) {
                        answerer.setLocalDescription(answer);
                        offerer.setRemoteDescription(answer);
                    }, function() {}, mediaConstraints);
                }
            </script>
            <script>
                var video_constraints = {
                    mandatory: {},
                    optional: []
                };

                function getUserMedia(successCallback) {
                    function errorCallback(e) {
                        alert(JSON.stringify(e, null, '\t'));
                    }

                    var mediaConstraints = { video: true, audio: true };

                    navigator.mediaDevices.getUserMedia(mediaConstraints).then(successCallback).catch(errorCallback);
                }
            </script>
            <script>
                getUserMedia(function (video_stream) {
                    offererPeer(video_stream);
                });
            </script>

            <section class="experiment" style="margin-left:0; margin-right:0;width: 100%;overflow: auto;">
                <h2>getStats.js Logs</h2><br>
                <table>
                    <thead>
                        <th>PeerId</th>
                        <th>IsOfferer</th>
                        <th>ConnectionInfo</th>
                        <th>DataChannel</th>
                        <th>EncryptedAs</th>
                        <th>AudioAvailBandwidth</th>
                        <th>VideoAvailBandwidth</th>
                    </thead>
                    <tbody id="getStats-logs-container"></tbody>
                </table>
            </section>

            <script>
                var getStatsLogsContainer = document.getElementById('getStats-logs-container');
                function invokeGetStats(peer) {
                    getStats(peer, function(result) {
                        var tr = getStatsLogsContainer.querySelector('#peer-stats-' + peer.id);
                        if (!tr) {
                            tr = document.createElement('tr');
                            tr.id = 'peer-stats-' + peer.id;
                            getStatsLogsContainer.appendChild(tr);
                        }

                        var html = '<td>' + peer.id + '</td>';

                        html += '<td>' + (result.isOfferer ? 'Offerer' : 'Answerer') + '</td>';

                        html += '<td>';
                        if (result.connectionType && result.connectionType.remote) {
                            html += 'RemoteIceType (' + result.connectionType.remote.candidateType + '), ';

                            if (result.connectionType.remote.networkType) {
                                html += 'RemoteNetType (' + result.connectionType.remote.networkType + '), ';
                            }
                        }

                        if (result.connectionType && result.connectionType.local) {
                            html += 'LocalIceType (' + result.connectionType.local.candidateType + '), ';

                            if (result.connectionType.local.networkType) {
                                html += 'LocalNetType (' + result.connectionType.local.networkType + '), ';
                            }
                        }

                        html += '</td>';
                        html += '<td>' + (result.datachannel ? result.datachannel.state : 'not-created') + '</td>';

                        if (result.encryption) {
                            html += '<td>' + result.encryption + '</td>';
                        }

                        if(result.audio.availableBandwidth) {
                            html += '<td>' + result.audio.availableBandwidth + ' kbps</td>';
                        }

                        if(result.video.availableBandwidth) {
                            html += '<td>' + result.video.availableBandwidth + ' kbps</td>';
                        }

                        tr.innerHTML = html;

                        if (result.datachannel && result.datachannel.state === 'close') {
                            tr.parentNode.removeChild(tr);
                            result.nomore();
                        }

                        window.getStatsResult = result;
                    }, 5 * 1000);
                }
            </script>

        <section class="experiment own-widgets">
            <h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/getStats/issues" target="_blank">getStats Issues</a>
            </h2>
            <div id="github-issues"></div>
        </section>

        <section class="experiment">
            <h2 class="header" id="feedback">Feedback</h2>
            <div>
                <textarea id="message" style="border: 1px solid rgb(189, 189, 189); height: 8em; margin: .2em; outline: none; resize: vertical; width: 98%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
            </div>
            <button id="send-message" style="font-size: 1em;">Send Message</button>
            <small style="margin-left: 1em;">Enter your email too; if you want "direct" reply!</small>
        </section>

        <section class="experiment own-widgets latest-commits">
            <h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/getStats/commits/master" target="_blank">Latest Updates</a>
            </h2>
            <div id="github-commits"></div>
        </section>
    </article>

    <a href="https://github.com/muaz-khan/getStats" class="fork-left"></a>

    <footer>
        <p>
            <a href="https://www.webrtc-experiment.com/">WebRTC Experiments</a> © <a href="https://plus.google.com/+MuazKhan" rel="author" target="_blank">Muaz Khan</a>
            <a href="mailto:muazkh@gmail.com" target="_blank">muazkh@gmail.com</a>
        </p>
    </footer>

    <!-- commits.js is useless for you! -->
    <script>
        window.useThisGithubPath = 'muaz-khan/getStats';
    </script>
    <script src="https://cdn.webrtc-experiment.com/commits.js" async></script>
</body>

</html>
